<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活物业</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
	</head>
	<style>

	</style>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- <a class="icon icon-menu pull-right open-panel"></a> -->
				<a class="button button-link button-nav pull-left" @click="goback()">
					<span class="icon icon-left"></span>
				</a>

				<!-- 社区入口 -->

				<h1 class="title">悦生活物业</h1>
			</header>

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external" href="../main-index.html">
					<span class="icon icon-app"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="manager_fail.html">
					<span class="icon icon-settings"></span>
					<span class="tab-label">故障申请</span>
				</a>
				<a class="tab-item external active" href="manager_charge_info.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">物业缴费情况</span>
				</a>
				<a class="tab-item external" href="manager_myactivity.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">我的社区活动</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<header class="bar bar-nav">
					<h1 class='title'>缴费情况</h1>
				</header>
				<div class="content">
					<div class="list-block">
						<ul>

							<li class="align-top">
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-comment"></i></div>
									<div class="item-inner">
										<div class="item-title label" style="text-align: center;">选择月份</div>
										<div class="item-input">
											<input type="text" id="my-input" />
										</div>
									</div>
								</div>
							</li>
							<!-- Text inputs -->
							<li>
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-name"></i></div>
									<div class="item-inner">
										<div class="item-title label">物管费</div>
										<div class="item-input">
											<input type="text" v-model="formData.name" readonly="readonly">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-name"></i></div>
									<div class="item-inner">
										<div class="item-title label">电费</div>
										<div class="item-input">
											<input type="number" placeholder="" v-model="formData.phone" readonly="readonly">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-name"></i></div>
									<div class="item-inner">
										<div class="item-title label">车辆管理费</div>
										<div class="item-input">
											<input type="number" placeholder="" v-model="formData.phone" readonly="readonly">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-name"></i></div>
									<div class="item-inner">
										<div class="item-title label">车辆管理费</div>
										<div class="item-input">
											<input type="number" placeholder="" v-model="formData.phone" readonly="readonly">
										</div>
									</div>
								</div>
							</li>


							<li class="align-top">
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-comment"></i></div>
									<div class="item-inner">
										<div class="item-title label">是否已缴费</div>
										<div class="item-input">
											<label class="label-switch">
												<input type="checkbox">
												<div class="checkbox"></div>
											</label>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="content-block">
						<div class="row">
							<div class="col-50"><a href="#" class="button button-big button-fill button-success" @click="submitdata()">查看</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-right panel-cover" style="background-image: linear-gradient(to right,#f5f7fa,#c3cfe2)">
			<p><a href="#" class="close-panel">关闭菜单</a></p>
			<div class="content-block">
				<p>这是一个侧栏</p>


			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/vue.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					formData: {
						name: '',
						phone: '',
						content: ''
					},
					createdate: ''
				},
				methods: {
					goback() {
						window.history.go(-1)
					},
					submitdata() {
						
					}
				}
			})

			$(function() {
				$("#my-input").calendar({
					value: [],
					maxDate: new Date(),
					onChange: function(p, values, displayValues) {
						// 获取日期值
						vm.createdate = displayValues
					}
				});
				$(document).on("click", "#my-input", function() {
					console.log("点击事件")
				});
			})
		</script>
	</body>
	</body>
</html>
